import React from "react";
import "../../../css/r_item.less"; // 引入外部样式文件

interface RankingItemProps {
  Serial_Number: number;
  name: string;
  Votes: number;
  rank: number;
  avtor: string;
}

const RankingItem: React.FC<RankingItemProps> = ({
  Serial_Number,
  name,
  Votes,
  rank,
  avtor,
}) => {
  return (
    <div className="ranking-item">
      <div className="ranking-item-left">
        <img className="img" src={avtor} alt={`${name}'s avatar`} />
      </div>
      <div className="ranking-item-right">
        <div className="name">
          <span className="serial">{Serial_Number}号</span>
          <span className="name-text">{name}</span>
        </div>
        <div className="votes">票数：{Votes}</div>
      </div>
      <div className="ranking-position">第{rank}名</div>
    </div>
  );
};

export default RankingItem;
